<!-- 机构新增 -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" aria-hidden="true"
  id="mechanismAdd"  [ngClass]="{'guide-true': !twomodel}">
  <div class="modal-dialog modal-lg institution-modal modal-lg-f" role="document" [ngClass]="{'twomodel-model':twomodel}">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">机构管理 — 新增</h4>
        <button type="button" class="close" data-dismiss="modal" *ngIf="twomodel" aria-hidden="true" (click)="reset()">×</button>

      </div>
      <div class="popup-body modal-body">

        <div class="bg-model overflow-hide">

          <form #FormAdd="ngForm" novalidate>

            <div class="col-xs-12 col-sm-6">

              <div class="form-group">
                <label class="col-xs-12 col-sm-3 control-label text-right">上级机构：</label>
                <div class="col-xs-12 col-sm-9">
                  <p>{{superiorAdd}}</p>
                </div>
              </div>

              <div class="form-group">
                <label class="col-xs-12 col-sm-3 control-label text-right">机构名称：</label>
                <div class="col-xs-12 col-sm-9">
                  <input type="text" name="institutionName" class="form-control" autocomplete="off" 
                                [(ngModel)]="adddate.institutionName" 
                                #institutionName=ngModel 
                                placeholder="请输入机构名称"
                                required/>
                  <label class="red required">*</label>
                  <div *ngIf="institutionName.invalid && (institutionName.touched)" class="error-alert">
                    <div *ngIf="institutionName.errors.required">
                      <small class="error">请输入机构名称</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group ">
                <label class="col-xs-12 col-sm-3 control-label text-right">显示名称：</label>
                <div class="col-xs-12 col-sm-9">
                  <input type="text" name="institutionDisplayName" class="form-control" autocomplete="off" #institutionDisplayName=ngModel
                    [(ngModel)]="adddate.institutionDisplayName" placeholder="请输入显示名称" required/>
                  <label class="red required">*</label>
                  <div *ngIf="institutionDisplayName.invalid && (institutionDisplayName.touched)" class="error-alert">
                    <div *ngIf="institutionDisplayName.errors.required">
                      <small class="error">请输入显示名称</small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group ">
                <label class="col-xs-12 col-sm-3 control-label text-right">到期日期：</label>
                <div class="col-xs-12 col-sm-9">
                  <input type="text" 
                  name="validDate" 
                  class="form-control" 
                  autocomplete="off" 
                  #validDate=ngModel 
                  [(ngModel)]="adddate.validDate" 
                  required 
                  #dp="bsDatepicker"  
                  placeholder="请选择到期日期"
                  [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD'}"
                  [minDate]="minDate"
                  bsDatepicker
                   />
                  <label class="red required">*</label>
                  <div *ngIf="validDate.invalid && (validDate.touched)" class="error-alert">
                    <div *ngIf="validDate.errors.required">
                      <small class="error">请选择到期日期</small>
                    </div>
                    <div *ngIf=""></div>
                  </div>
                </div>
              </div>
              
              
              <div class="form-group ">
                <label class="col-xs-12 col-sm-3 control-label text-right">机构类型：</label>
                <div class="col-xs-12 col-sm-9">
                  <select name="institutionType" class="pull-left" #institutionType=ngModel [(ngModel)]="adddate.institutionType" required>
                    <!-- <option value=null>请选择</option> -->
                    <option value="0">客户机构</option>
                    <option value="1">代理商</option>
                    <option value="2">应用提供商</option>
                    <option value="3">供应商</option>
                  </select>
                </div>
                <div *ngIf="institutionType.invalid && (institutionType.touched)" class="error-alert">
                  <div *ngIf="institutionType.errors.required">
                    <small class="error">请选择机构类型</small>
                  </div>
                </div>
              </div>
              <div class="form-group ">
                <label class="col-xs-12 col-sm-3 control-label text-right">服务类型：</label>
                <div class="col-xs-12 col-sm-9">
                  <select name="jgServerType" class="pull-left" #jgServerType=ngModel [(ngModel)]="adddate.jgServerType" required>
                    <!-- <option value=null>请选择</option> -->
                    <option value="0">线上图书馆</option>
                    <option value="1">镜像图书馆</option>
                    <option value="2">线上/镜像图书馆</option>
                  </select>
                </div>
                <div *ngIf="jgServerType.invalid && (jgServerType.touched)" class="error-alert">
                  <div *ngIf="jgServerType.errors.required">
                    <small class="error">请选择服务类型</small>
                  </div>
                </div>
              </div>
              <div class="form-group ">
                <label class="col-xs-12 col-sm-3 control-label text-right">机构状态：</label>
                <div class="col-xs-12 col-sm-9">
                  <!-- <select name="enabled" class="pull-left" required #enabled=ngModel [(ngModel)]="adddate.enabled" required>
                    <option value=null>请选择</option>
                    <option value="0">禁用</option>
                    <option value="1">启用</option>
                  </select> -->
                  <label class="toggle toggle-positive">
                    <input type="checkbox" name="enabled" #enabled=ngModel [(ngModel)]="adddate.enabled" >
                    <div class="track">
                        <div class="tit" *ngIf="adddate.enabled">启用</div>
                        <div class="tit right" *ngIf="!adddate.enabled">禁用</div>
                        <div class="handle"></div>
                    </div>
                  </label>
                </div>
                  <!-- <div *ngIf="enabled.invalid && (enabled.dirty || enabled.touched)" class="error-alert">
                    <div *ngIf="enabled.errors.required">
                      <small class="error">请选择机构状态</small>
                    </div>
                  </div> -->
              </div>
              
                

            </div>

            <div class="col-xs-12 col-sm-6">
              <!-- <div class="form-group">
                <label class="col-xs-12 col-sm-3 control-label text-right"></label>
                <div class="col-xs-12 col-sm-9">
                  <p style="height:29px;"></p>
                </div>
              </div> -->
              <div class="form-group ">
                  <label class="col-xs-12 col-sm-3 control-label text-right">联系人：</label>
                  <div class="col-xs-12 col-sm-9">
                    <input type="" name="contactName" class="form-control"  autocomplete="off" #contactName=ngModel [(ngModel)]="adddate.contactName"/>
                  </div>
                </div>
              <div class="form-group ">
                  <label class="col-xs-12 col-sm-3 control-label text-right">性质：</label>
                  <div class="col-xs-12 col-sm-9">
                    <input type="text" name="nature" class="form-control"  autocomplete="off" #nature=ngModel [(ngModel)]="adddate.nature"/>
                  </div>
                </div>
              <div class="form-group ">
                <label class="col-xs-12 col-sm-3 control-label text-right">行业：</label>
                <div class="col-xs-12 col-sm-9">
                  <input type="text" name="industry" class="form-control"  autocomplete="off" #industry=ngModel [(ngModel)]="adddate.industry"/>
                </div>
              </div>
              
              
              <div class="form-group ">
                <label class="col-xs-12 col-sm-3 control-label text-right">电话：</label>
                <div class="col-xs-12 col-sm-9">
                  <input type="number" name="phone" class="form-control" autocomplete="off" #phone=ngModel [(ngModel)]="adddate.phone" />
                </div>
              </div>
              <div class="form-group ">
                <label class="col-xs-12 col-sm-3 control-label text-right">邮编：</label>
                <div class="col-xs-12 col-sm-9">
                  <input type="number" name="postcode" class="form-control" autocomplete="off" #postcode=ngModel [(ngModel)]="adddate.postcode"
                  />
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12 col-sm-3 control-label text-right">省份：</label>
                <div class="col-xs-12 col-sm-9">
                  <input type="text" name="province" class="form-control" autocomplete="off" #province=ngModel [(ngModel)]="adddate.province"
                  />
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12 col-sm-3 control-label text-right">城市：</label>
                <div class="col-xs-12 col-sm-9">
                  <input type="text" name="city" class="form-control" autocomplete="off" #city=ngModel [(ngModel)]="adddate.city" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12 col-sm-3 control-label text-right">地址：</label>
                <div class="col-xs-12 col-sm-9">
                  <input type="text" name="address" class="form-control" autocomplete="off" #address=ngModel [(ngModel)]="adddate.address"
                  />
                </div>
              </div>
            </div>

            <div class="col-xs-12 col-sm-12">
              <div class="form-group">
                <label class="col-xs-12 col-sm-2 control-label text-right describe">描述：</label>
                <div class="pull-left describe">
                  <textarea rows="5" type="text" name="description" class="form-control" minlength="0"
                  maxlength="50"  #description=ngModel [(ngModel)]="adddate.description" placeholder="描述长度在0-50个汉字之间">
                   </textarea>
                   <div *ngIf="description.invalid" class="error-alert text-left">
                    <div *ngIf="description.errors.minlength || description.errors.maxlength">
                      <small class="error "> 描述长度在0-50之间</small>
                    </div>
                  </div>
                </div>
              </div>
            </div>



          </form>

        </div>
      </div>
      <div class="popup-footer modal-footer" [ngClass]="{'twomodel-footer':twomodel}">
        <button type="button" class="btn btn-fff" *ngIf="twomodel" (click)="reset()">取消</button>
        <button type="button" id="addtitle" class="btn btn-primary" [disabled]="FormAdd.invalid" (click)="submitAdd(0)"><span class="glyphicon glyphicon-plus"></span> 新增机构完成退出
        </button>
        <button type="button" class="btn btn-primary" *ngIf="twomodel == false" [disabled]="FormAdd.invalid" (click)="submitAdd(1)"><span class="glyphicon glyphicon-plus"></span> 新增机构并添加管理员
          <img  class="gesture-img" src="assets/right-product/guide/hand.png" />
        </button>
      </div>
    </div>
  </div>
</div>
<!-- 机构新增 end -->